<template>
  <div class="integral">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
      <ul>
        <li class="clearfix">
          <div class="left fl">+600</div>
          <div class="right fr">
            <p>2019-5-28 15:21:37</p>
            <p class="active">充值奖励</p>
          </div>
        </li>
        <li class="clearfix">
          <div class="left fl">-600</div>
          <div class="right fr">
            <p>2019-5-28 15:21:37</p>
            <p class="active1">积分商城</p>
          </div>
        </li>
        <li class="clearfix">
          <div class="left fl">+600</div>
          <div class="right fr">
            <p>2019-5-28 15:21:37</p>
            <p class="active">报名奖励</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "integral",
  data() {
    return {
      title: "积分详情"
    };
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
.integral {
  width: 100%;
  font-size: 0;
  background-color: #f8f8f8;
  position: relative;
  height: 13.34rem;
  .mint-header {
    background-color: #fff;
    color: rgb(49, 49, 49);
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
    height: 1rem;
  }
  .content{
      width: 100%;
      li{
          height: 1rem;
          background-color: #fff;
          font-family: @family;
          margin-top:0.2rem;
          padding:0 0.2rem;
          box-sizing: border-box;
           color:rgb(54,54,54);
          .left{
              width: 20%;
              font-size: 0.36rem;
              padding-top:0.3rem;
             box-sizing: border-box;
            
          } 
          .right{
              width: 75%;
              font-size: 0.2rem;
              text-align: right;
              padding-top:0.1rem;
              box-sizing: border-box;

              p{
                  line-height: 0.4rem;
                  &:nth-child(1){
                      color:rgb(49,49,49);
                      font-size: 0.24rem;
                      font-family: @family;
                  }
                 &.active{
                     color:rgb(15,162,0);
                 }
                  &.active1{
                     color:rgb(237,26,33);
                 }
              }
            }
      }
  }
}
</style>